<template>
  <div class="hospital">
    <div class="top">
      <div class="title">
        <span>医疗救治定点医院和发热门诊一览</span>
      </div>
    </div>
    <div class="serach">
      <el-row class="demo-autocomplete" style="width: 400px">
        <el-col :span="12">
          <el-autocomplete
            class="inline-input"
            v-model="hoinput"
            :fetch-suggestions="querySearch"
            placeholder="请输入医院名称"
            clearable
            size="small"
          ></el-autocomplete>
        </el-col>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getHosData()"
          style="margin-left: 10px"
          size="small"
          >搜索</el-button
        >
      </el-row>
    </div>
    <div class="hospotalCar">
      <el-card
        class="box-card"
        style="width: 30%; margin-bottom: 20px; margin-right: 3%"
        v-for="(item, index) in hosdata"
        :key="index"
        shadow="hover"
      >
        <div slot="header" class="clearfix" style="padding: 5px">
          <span style="font-weight: bold">{{ item.name }}</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click.native="pushdata(item)"
            title="点击查看地图位置"
          >
            <div class="localicon">
              <img
                src="../assets/location.png"
                alt=""
                width="20px"
                style="vertical-align: middle"
              />
            </div>
            <div class="distance">{{ item.distance }}km</div>
          </el-button>
        </div>
        <div class="text item">
          <span style="font-weight: bold">地点：</span
          >{{ item.city }}&nbsp;&nbsp;{{ item.area }}&nbsp;&nbsp;{{
            item.address
          }}
        </div>
        <div class="text item">
          <span style="font-weight: bold">介绍：</span>
          <el-tag type="" effect="dark" size="small">
            {{ item.introduce }}
          </el-tag>
        </div>
        <el-divider></el-divider>
        <div class="text item">
          <span style="font-weight: bold"
            >详情：<i class="header-icon el-icon-info"></i
          ></span>

          <div style="font-size: 13px; margin-top: 10px">
            &nbsp;&nbsp;&nbsp;&nbsp; {{ item.flags }}
          </div>
          <!-- <span style="font-weight: bold"> 详情：</span><br /><br />
          {{ item.flags }} -->
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="pagesize"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { get } from "@/utils/request";

export default {
  data() {
    return {
      // 要查询的医院名称
      hoinput: "",
      // 当前页码
      page: 1,
      // 每页要展示的数据条数
      pagesize: 3,
      // 数据总条数
      total: 10,
      // 医院的数据
      hosdata: [],
      // 输入框显示数据
      inputhosData: [],
      // 折叠面板
      activeNames: ["1"],
    };
  },
  methods: {
    // 获取当前定位的经纬度
    getlocal() {
      // 将this的指向进行保存，嵌套函数和箭头函数的this指向会有问题
      //高德地图
      let _this = this;
      // 使用JS API插件：AMap.Geolocation：定位，提供了获取用户当前准确位置、所在城市的方法
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量
          offset: [10, 20],
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          position: "RB",
        });

        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            onComplete(result);
          } else {
            onError(result);
          }
        });

        function onComplete(data) {
          // data是具体的定位信息
          console.log(data);
          // 获取到经纬度
          let longitude = data.position.lng;
          let latitude = data.position.lat;

          // 遍历获取到的医院数组，每个对象的经纬度
          _this.hosdata.map((item) => {
            // 我自己的位置
            let p1 = [longitude, latitude];
            // 医院的经纬度
            let p2 = [item.longitude, item.latitude];
            // 根据两个位置的经纬度获取他们之间的距离
            let dis = AMap.GeometryUtil.distance(p1, p2);
            // 向该对象里面添加一个键值对
            // $set（目标对象，要添加的属性名，要添加的属性值）
            _this.$set(item, "distance", (dis / 1000).toFixed(2));
          });
        }

        function onError(data) {
          // 定位出错
          console.log("定位出错");
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getHosData();
      this.getlocal();
    },
    // 获取医院的相关数据
    async getHosData() {
      let params = {
        page: this.page,
        pageSize: this.pagesize,
        name: this.hoinput,
      };
      let res = await get("/hospital/pageQuery", params);
      this.hosdata = res.data.list;
      this.total = res.data.total;
      this.getlocal();
    },
    // 列表点击事件
    pushdata(item) {
      this.$router.push({
        path: "/hospital/map",
        query: {
          longitude: item.longitude,
          latitude: item.latitude,
          name: item.name,
          listtotal: this.total,
        },
      });
    },
    //带数据的输入框
    //若是输入框输入字符就自动重新依据输入字符遍历提示列表
    querySearch(queryString, cb) {
      var inputhosData = this.inputhosData;
      var results = queryString
        ? inputhosData.filter(this.createFilter(queryString))
        : inputhosData;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (inputhosData) => {
        return (
          inputhosData.value
            .toLowerCase()
            .includes(queryString.toLowerCase()) === true
        );
      };
    },
    // 输入框的选择数据
    loadAll() {
      return this.inputhosData;
    },
    // 输入框的相关数据
    async getInputData() {
      let params = {
        page: 1,
        pageSize: this.total,
        name: this.hoinput,
      };
      let res = await get("/hospital/pageQuery", params);
      // 输入框显示数据
      this.inputhosData = res.data.list.map((item) => {
        return {
          value: item.name,
          address: item.address,
        };
      });
      this.loadAll();
    },
    // ---------------
  },

  created() {
    //获取医院数据
    this.getHosData();
    //获取当前位置定位经纬度并给每个医院数据添加医院距当前位置的距离
    this.getlocal();
    //获取搜索输入框的初始提示数据
    this.getInputData();
  },
  // --------------------------------------------
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  text-align: left;
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.clearfix {
  line-height: 40px;

  /* background-color: #fcb14d; */
}
/* 卡片展示 */
.hospotalCar {
  display: flex;
  /* 分配剩余空间 */
  /* justify-content: space-between; */
  text-align: center;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-right: 10px;
}
/* --------------------------------------------------- */
/*  */
/* 顶部top背景设置 */
.top {
  background-image: url("../assets/bg1.png");
  width: 100%;
  /* height: 130px; */
  border-radius: 5px;
  line-height: 130px;
}
/* 设置标题的样式 */
.top .title {
  color: aliceblue;
  font-size: 18px;
  font-weight: bold;
  margin-left: 20px;
}
/* 搜索区域的样式 */
.serach {
  margin-top: 10px;
}
/* 设置医院列表样式 */
.listho {
  display: flex;
  margin-top: 20px;
  border-bottom: 1px solid rgb(215, 214, 214);
}
.listho .hosInfo {
  /* 把剩余的空间全部分配给该标签 */
  flex: 1;
}
/* 名称 */
.listho .hosInfo .name {
  font-size: 15px;
  font-weight: bold;
}
/* 描述 */
.listho .hosInfo .decri {
  font-size: 14px;
  background-color: #fcb14d;
  display: inline-block;
  border-radius: 3px;
  padding: 0.2em;
  color: rgb(250, 250, 252);
}
/* 地址 */
.listho .hosInfo .address {
  font-size: 14px;
}
</style>
